<template>
  <div class="container">
    <!-- 工作经验，专业，婚姻状态 -->
    <div class="title">基本信息填写</div>
    <ul>
      <li>
        <span>姓名<span class="font_red_light">*</span></span>
        <input type="text" name="name" placeholder="请输入真实姓名" v-model="name1">
      </li>
      <li>
        <span>性别<span class="font_red_light">*</span></span>
          <input @click="showPicker(sex,'sexInput')" type="text" name="name" placeholder="选择性别" v-model="sexInput" readonly>
          <span @click="showPicker(sex,'sexInput')" >></span>
          <popup-picker :col="col" :models="models" ref="minePopup" @getSelectValue="getSelectValue"></popup-picker>
      </li>
      <li>
        <span>年龄<span class="font_red_light">*</span></span>
        <input type="number" name="name" placeholder="请填写年龄" v-model="age">
      </li>
      <li>
        <span>最高学历<span class="font_red_light">*</span></span>
          <input @click="showPicker(education,'educationInput')" type="text" name="name" placeholder="选择学历" v-model="educationInput" readonly>
          <span @click="showPicker(education,'educationInput')">></span>
          <popup-picker :col="col" ref="minePopup" :models="models" @getSelectValue="getSelectValue"></popup-picker>
      </li>
      <li>
        <span>工作经验<span class="font_red_light">*</span></span>
        <input @click="showPicker(experience,'experienceInput')" type="text" name="name" placeholder="选择工作经验" v-model="experienceInput" readonly>
        <span @click="showPicker(experience,'experienceInput')">></span>
        <popup-picker :col="col" ref="minePopup" :models="models" @getSelectValue="getSelectValue"></popup-picker>
      </li>
      <!-- <li>
        <span>我的技能</span>
        <input type="text" name="name" placeholder="请填写技能" v-model="skill">
      </li> -->
      <li>
        <span>手机号码<span class="font_red_light">*</span></span>
        <input type="text" name="name" placeholder="请填写联系方式" v-model="tel">
      </li>
      <li>
        <span>邮箱</span>
        <input type="text" name="name" placeholder="请填写联系方式" v-model="email">
      </li>
      <li>
        <span>微信号码</span>
        <input type="text" name="name" placeholder="请填写联系方式" v-model="wxNum">
      </li>
      <li style="margin-top:10px;height:40px" class="uploadImg">
        <span>个人头像</span>
        <van-uploader :after-read="onRead">
          <img :src="logoImg.src" class="addImg" />
        </van-uploader>
      </li>
      <div class="commit" @click="commit">
        <div>保存</div>
      </div>
    </ul>
  </div>
</template>

<script>
import popupPicker from '@/components/popupPicker';
import {Toast} from 'vant';
export default {
  data () {
    return {
      col:[],
      models:[],
      sex:['男','女'],  //性别
      education:['小学','初中','高中','本科','研究生','硕士','博士'],  //学历
      experience:['应届毕业生','1-2年','3-4年','5-7年','8-10年','10年以上'],//工作经验
      skill:'',  //技能
      sexInput:"",//性别
      educationInput:"",  //学历
      experienceInput:'',//工作经历
      name1:"",  //姓名
      age:"",   //年龄
      tel:"",   //联系电话
      wxNum:'',
      email:'',
      logoImg:{src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""},//头像

    }
  },
  components:{
    popupPicker
  },
  methods: {
    getSelectValue(val,model){
      this[model]=val
    },
    showPicker(col,mod){
      this.$refs.minePopup.$data.showArea=true;
      this.col=col;
      this.models=mod
    },
    async getInformation(){  //获取个人简历信息
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios('/resume/getUserResume',{user_token:userToken})
      let data=res.data.data;
      if(res.data.level=='success'){
        let sexTag="";
        if(data.user_info.sex=="1"){sexTag='男'}else if(data.user_info.sex=='2'){sexTag="女"}else{sexTag='保密'}
        this.name1=data.user_info.realname
        this.sexInput=sexTag
        this.age=data.age
        this.tel=data.phone
        this.logoImg.id=data.user_info.photo_id
        this.logoImg.src=data.user_info.photo_url
        this.educationInput=data.education
        this.experienceInput=data.work_experience_num
        this.email=data.email
        this.wxNum=data.wx
      }
    },
    async onRead(file) {
      let f=file.content;


      this.logoImg.src='http://file.rzkeji.com/web/recruit/icon/loading.svg';
      this.$axios.post(
        '/file/UploadBase64',
        {base_code:f}

      ).then((res)=>{
        console.log(res);
        this.logoImg.src=res.data.data.img_url
        this.logoImg.id=res.data.data.id
        })
    },
    async commit(){  //提交简历信息
    if(this.name1==''){
        Toast('姓名不能为空');
        return
      }else if(this.sexTag==''){
        Toast('性别不能为空');
        return
      }else if(this.age==''){
        Toast('年龄不能为空');
        return
      }else if(this.educationInput==''){
        Toast('学历不能为空');
        return
      }else if(this.tel==''){
        Toast('电话号码不能为空');
        return
      }
      var userToken=window.localStorage.getItem('userToken')
      let sexTag=this.$currency.sexTag(this.sexInput);
      let res=await this.$axios.post('/resume/addResume',{
        user_token:userToken,
        type:'baisc_data',
        realname:this.name1,
        sex:sexTag,
        age:this.age,
        education:this.educationInput,
        email:this.email,
        wx:this.wxNum,
        phone:this.tel,
        photo_id:this.logoImg.id,
        work_experience_num:this.experienceInput
        })
      if(res.data.level=='success'){
        this.$currency.showToast('填写成功',1500,'success')
        setTimeout(()=>{
          this.$router.go(-1)
        },1500)

      }else{
        this.$currency.showToast(res.data.message,1500,'fail')
      }
    },
    async upLoadImg(){
      var _this=this;
      let res=await this.$currency.upLoadImage()
      _this.logoImg.src=JSON.parse(res.data).data.img_url
      _this.logoImg.id=JSON.parse(res.data).data.id
    }
  },
  activated(){
    this.getInformation()
  },
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;}
.container{padding-bottom:89px;background-color: #F8F8FB}
.container ul{width: 100%;}
.container ul li{width: 100%;display: flex;justify-content: row;padding: 15px 0px;background-color: #fff;margin-bottom: 2px;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 80px;height: 80px;border-radius: 10px;object-fit: cover;}

.picker_inner{position: relative;display: flex;height: auto;}
.picker_inner:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index:999;
}
.arrow{margin-right: 10px;font-size: 20px;color:#B2B2B9;float:right;width:auto!important}

.uploadImg{
  height: 120px !important;
  display: flex;
  align-items: center;
}
.font_red_light{
  color:red !important;
  padding:0 !important;
}
</style>
